<template>
  <div class="home-info">
    <div class="wrapper">
      <div class="description">
        <div class="description-key">
          <span class="simple">简约</span>
          <span class="handy">好用</span>
          <span class="free">免费</span>
        </div>
        <div class="slogan">
          腾讯问卷为您提供专业调研服务
        </div>
      </div>

      <div class="contact">
        <div class="contact-title">
          <span class="title">任何建议和问题随时</span>
          <a class="a" href="">吐个槽</a>
        </div>

        <div class="ways">
          <div>
            官方邮箱:
            <a class="ways-name" href="">wj@tencent.com</a>
          </div>
          <div>
            官方微博:
            <a class="ways-name" href="">腾讯问卷</a>
          </div>
          <div>
            官方QQ群:
            <a class="ways-name" href="">365694489</a>
          </div>
          <div>
            客服QQ:
            <a class="ways-name QQ" href="">在线咨询</a>
          </div>

        </div>
      </div>

      <div class="wx-qr">
        <img src="https://wj.qq.com/image/wx_public_qr_code.png?v=@version" alt="">
        <p class="bold">扫描关注微信公众号</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.home-info {
  height: 196px;
  background-color: #f5f5f5;
  margin-top: 75px;
}

.wrapper{
  width: 1000px;
  height: 196px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.description-key {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  color: #58a6e7;
  text-align: end;
  line-height: 54px;
}
.simple {
  width: 100px;
  height: 54px;
  margin-right: 20px;
  background: url("https://cdn.ur.qq.com/image/icon_simple.png?v=1.9.80") no-repeat;
}
.handy {
  width: 100px;
  height: 54px;
  margin-right: 20px;
  background: url("https://cdn.ur.qq.com/image/icon_easy.png?v=1.9.80") no-repeat;
}
.free {
  width: 100px;
  height: 54px;
  margin-right: 20px;
  background: url("https://cdn.ur.qq.com/image/icon_free.png?v=1.9.80") no-repeat;
}

.slogan {
  color: #999;
  font-size: 22px;
  margin-top: 22px;
}

.contact-title {
  margin-bottom: 18px;
}

.title {
  display: inline-block;
  margin-right: 5px;
}

.a {
  color: #58a6e7;
  text-decoration: none;
}

.ways{
  font-size: 13px;
  line-height: 190%;
  color: #999;
}

.ways-name {
  text-decoration: none;
  color: #333;
}

.QQ {
  display: inline-block;
  height: 28px;
  border: 1px solid #dadee7;
  background: url('https://bqq.gtimg.com/qidian/src/wpa/dist/4.1.0/images/1_1_1.png') no-repeat #fff;
  background-position: 10px;
  line-height: 28px;
  padding-left: 30px;
  padding-right: 10px;
}

.wx-qr {
  width: 130px;
  text-align: center;
  font-size: 13px;
  color: #999;
}

.bold {
  margin-top: -3px;
}
</style>
